<template>
  <a-spin :spinning="loading">
    <a-alert
      message="每单佣金金额 = 订单金额 * 渠道商抽成比例"
      description="例如：订单金额100元，其中租车金额80元，一号增值服务20元，来自甲渠道。该渠道抽成5%，则最后抽成金额为100*5% = 5元，服务商获得95元"
      type="info"
      show-icon
    />
    <p class="mt-20 ant-descriptions-title">渠道商抽成</p>
    <ul class="channel">
      <li class="channel-list">
        <span class="channl-name">渠道名称</span>
        <span class="channl-proportion">订单金额抽成比例(%)</span>
      </li>
      <li class="channel-lists" v-for="(item, index) in vendorCommissionList" :key="index">
        <span class="channl-name">{{ item.channelName }}</span>
        <span class="channl-proportion">
          <a-input-number
            class="w-full"
            v-model="item.commissionScale"
            placeholder="请输入抽成比例"
            min="0"
            max="100"
            :precision="1"
          />
        </span>
      </li>
    </ul>
    <p class="mt-20" style="float: right">
      <a-button type="primary" @click="saveOk()" :loading="loadingOk"> 提交 </a-button>
    </p>
  </a-spin>
</template>
<script>
import { getVendorCommissionList, setVendorCommission } from '@/api/vendor'

export default {
  name: 'commission',
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      loadingOk: false,
      loading: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      showModal: true,
      confirmLoading: false,
      form: this.$form.createForm(this),
      vendorCommissionList: [],
    }
  },
  created() {
    //  CredentialType
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getVendorCommissionList({ vendorId: this.id }).then((res) => {
        this.vendorCommissionList = res
        this.loading = false
      })
    },
    saveOk() {
      const vendorCommissionList = this.vendorCommissionList
      console.log('vendorCommissionList', vendorCommissionList)
      if (!vendorCommissionList.every((item) => item.commissionScale!= null)) return this.$message.warning('请输入抽成比例')
      this.loadingOk = true
      setVendorCommission({ vendorId: this.id, commissions: vendorCommissionList }).then((res) => {
        this.$message.success('提交成功！')
        this.loadingOk = false
      })
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}

.shop-photo {
  position: relative;

  .num {
    position: absolute;
    top: -39px;
    font-size: 14px;
    font-weight: bold;
    left: 164px;
    color: #999;
  }
}

.channel {
  margin: 0;
  padding: 0;

  span {
    display: block;
    width: 50%;
    line-height: 32px;
  }

  .channel-list {
    .flex;
    color: #999;
  }

  .channel-lists {
    .flex;
    padding: 10px 0;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid #eee;
  }
}
</style>
